@@include('./tpl/headererr.html',{"title":"注册"})
<div class="pure-content padding-bottom-xl margin-top">

    <div class="center padding-top-xl margin-top " style="width:800px;height:600px;">
        <div class="padding-bottom-sm pure-g">
            <div class="pure-u-7-24">
            </div>
            <div class="pure-u-4-24 text-xl padding-left-sm">
                用户注册
            </div>


        </div>
        <form class="pure-form margin-top wt-reg-form">

            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm ">
                    姓名
                </div>
                <div class="pure-u-7-24">
                    <input name="realName" id="realName" class="pure-input-1 text-sm" minlength="2" maxlength="4" placeholder="请输入姓名" required>
                </div>
                <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="realName"></div>

            </div>


            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm ">
                    用户名
                </div>
                <div class="pure-u-7-24">
                    <input name="userName" id="userName" class="pure-input-1 text-sm"  minlength="6" minlength="16"  placeholder="输入用户名" required>
                </div>
                <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="userName"></div>

            </div>

            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                    手机号
                </div>
                <div class="pure-u-7-24">
                    <input name="mobile" id="mobile" class="pure-input-1 text-sm" maxlength="11" placeholder="输入手机号" required>
                </div>
                <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="mobile"></div>
            </div>

            <!--<div class="padding-bottom-sm pure-g">-->
            <!--<div class="pure-u-6-24 text-right padding-right-sm ">-->
            <!--性别-->
            <!--</div>-->
            <!--<div class="pure-u-13-24">-->
            <!--<select data-placeholder="选择性别" name="gender" id="gender" class="chosen-select text-sm pure-input-1" required>-->
            <!--<option value="0"></option>-->
            <!--<option value="13">未知</option>-->
            <!--<option value="11">男</option>-->
            <!--<option value="12">女</option>-->
            <!--</select>-->
            <!--</div>-->
            <!--<div class="pure-u-5-24"></div>-->
            <!--</div>-->


            <!--<div class="padding-bottom-sm pure-g">-->
            <!--<div class="pure-u-6-24 text-right padding-right-sm ">-->
            <!--证件类型-->
            <!--</div>-->
            <!--<div class="pure-u-13-24">-->
            <!--<select data-placeholder="选择证件类型" name="cardType" id="cardType" class="chosen-select text-sm pure-input-1" required>-->
            <!--<option value="0"></option>-->
            <!--<option value="13">其他</option>-->
            <!--<option value="11">身份证</option>-->
            <!--<option value="12">护照</option>-->
            <!--</select>-->
            <!--</div>-->
            <!--<div class="pure-u-5-24"></div>-->
            <!--</div>-->


            <!--<div class="padding-bottom-sm pure-g">-->
            <!--<div class="pure-u-6-24 text-right padding-right-sm ">-->
            <!--证件号-->
            <!--</div>-->
            <!--<div class="pure-u-13-24">-->
            <!--<input name="cardNo" class="pure-input-1 text-sm" placeholder="输入证件号">-->
            <!--</div>-->
            <!--<div class="pure-u-5-24"></div>-->
            <!--</div>-->


            <!--<div class="padding-bottom-sm pure-g">-->
            <!--<div class="pure-u-6-24 text-right padding-right-sm ">-->
            <!--邮箱-->
            <!--</div>-->
            <!--<div class="pure-u-13-24">-->
            <!--<input type="email" name="email" class="pure-input-1 text-sm" placeholder="输入邮箱">-->
            <!--</div>-->
            <!--<div class="pure-u-5-24"></div>-->
            <!--</div>-->


            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                    密码
                </div>
                <div class="pure-u-7-24">
                    <input type="password" name="password" id="password" class="pure-input-1 text-sm " minlength="6" maxlength="16" placeholder="输入密码" required>
                </div>
                <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="password"></div>
            </div>

            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                    确认密码
                </div>
                <div class="pure-u-7-24">
                    <input type="password" name="cpassword" id="cpassword" class="pure-input-1 text-sm " minlength="6" maxlength="16" placeholder="确认密码" required>
                </div>
                <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="cpassword"></div>
            </div>

            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                    验证码
                </div>
                <div class="pure-u-7-24">
                    <div class="pure-u-1-2 padding-right-xs">
                        <input name="webCaptcha" id="webCaptcha" class="pure-input-1 text-sm wt-reg-captcha" minlength="4" maxlength="4"
                               placeholder="验证码" required>
                    </div>
                    <div class="pure-u-1-2 ">
                        <img src="/login/api/captchaImage/144/31/loginCaptchaImage/0?v=00000000"
                             class="pure-img fr wt-captcha-img cur" style="background:#eee;width:100%;height:36px;">
                    </div>
                </div>
                <div class="pure-u-7-24 padding-left-xs  text-sm text-danger padding-top-xxs" for="webCaptcha"></div>
            </div>


            <div class="padding-bottom-sm pure-g">
                <div class="pure-u-7-24">
                </div>
                <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                    手机验证码
                </div>
                <div class="pure-u-7-24">
                    <div class="pure-u-1-2 padding-right-xs">
                        <input name="smsCode" id="smsCode" class="pure-input-1 text-sm" minlength="4" maxlength="4"
                               placeholder="短信验证码" required>

                    </div>
                    <div class="pure-u-1-2 ">
                        <input type="button"
                               class="pure-button pure-input-1 text-sm pure-button-disabled wt-send-sms-btn"
                               value="发送验证码"
                               style="padding:8px;">

                    </div>
                </div>
                <div class="pure-u-7-24 padding-left-xs  text-sm text-danger padding-top-xxs" for="smsCode"></div>

            </div>

            <div class="pure-g margin-top-xs">
                <div class="pure-u-10-24">
                </div>
                <div class="pure-u-7-24 text-sm">
                    <label for="wt-reg-xy" class="pure-checkbox">
                        <input type="checkbox" id="wt-reg-xy" name="xy" value="1" required> 已阅读并同意<a href="#">《注册协议》</a>
                    </label>
                </div>
                <div class="pure-u-7-24 padding-left-xs  text-sm text-danger" for="wt-reg-xy"></div>
            </div>

            <div class="text-center text-sm wt-login-error margin-vertical-xs text-danger"></div>
            <div class="pure-u-7-24">
            </div>
            <div class="pure-g pure-u-12-24">
                <div class="pure-u-1-2 padding-right-xs">
                    <button class="pure-button pure-button-xl pure-button-primary pure-input-1 pure-button-disabled wt-submit-btn">立即注册</button>
                </div>
                <div class="pure-u-1-2 padding-left-xs">
                    <input type="button" class="pure-button pure-button-xl pure-button pure-input-1 wt-reset-btn" value="重置">

                </div>
            </div>


        </form>

    </div>
</div>

@@include('./tpl/commonjs.html')
<script>
    $(function () {


        var wait = 120;

        function time(o) {
            if (wait == 0) {
                $(".wt-reg-captcha").val("");
                $(o).val("发送验证码");
                wait = 120;

            } else {
                $(o).addClass("pure-button-disabled")
                $(o).val(wait + "s后重新发送");
                wait--;
                setTimeout(function () {
                        time(o)
                    },
                    1000)
            }
        }


        $(".wt-send-sms-btn").on("click", function () {
            time(this);
            var regdata = $(".wt-reg-form").form2Json();
            delete regdata.password;
            delete regdata.cpassword;
            delete regdata.userName;
            delete regdata.realName;

            commonctl.sendSms(regdata)

        })


        $('.chosen-select').chosen({
            disable_search: true,
            width: '100%'
        })

        $(".wt-reg-captcha").on("blur keyup", function () {
            if ($(this).val().length == 4&&$("#mobile").val().length == 11&&$("div[for='mobile']").val()==''&&wait==120) {
                $(".wt-send-sms-btn").removeClass("pure-button-disabled")
            }
            else {
                $(".wt-send-sms-btn").addClass("pure-button-disabled")

            }
        })


        $("#mobile").on("blur keyup", function () {
            if ($(".wt-reg-captcha").val().length == 4&&$(this).val().length == 11&&$("div[for='mobile']").val()==''&&wait==120) {
                $(".wt-send-sms-btn").removeClass("pure-button-disabled")
            }
            else {
                $(".wt-send-sms-btn").addClass("pure-button-disabled")

            }
        })



        $("#wt-reg-xy").on("click", function () {
            if ($(this).is(":checked")) {
                $(".wt-submit-btn").removeClass("pure-button-disabled")
            }
            else {
                $(".wt-submit-btn").addClass("pure-button-disabled")

            }
        })

    })
</script>

@@include('./tpl/footerlogin.html')